<template>
    <!--START post-->
    <div class="m-settings">
        <div class="settings theme">
            <span class="title">主题：</span>
            <mu-radio label="default" name="group" nativeValue="default" v-model="theme" class="theme-radio" />
            <mu-radio label="teal" name="group" nativeValue="teal" v-model="theme" class="theme-radio" />
            <mu-radio label="brown" name="group" nativeValue="brown" v-model="theme" class="theme-radio" />
        </div>
        <div class="settings something">
            <span class="title">某项配置：</span>
            <mu-switch v-model="s1" class="demo-switch" />
        </div>
        <div class="settings something">
            <span class="title">某项配置：</span>
            <mu-switch v-model="s2" class="demo-switch" />
        </div>
    </div>
    <!--END post-->
</template>
<script>
export default {
    name: 'settings',
    data() {
        return {
            theme: 'default',
            s1: true,
            s2: false
        }
    },
    methods: {

    }
}
</script>
<style scoped lang="scss">
.m-settings {
    width: 80%;
    margin: 0 auto;
}
.settings{
    margin: 20px 0;
}
.mu-radio {
    margin-right: 10px;
}

.theme {
    .title {
        vertical-align: 40%;
    }
}
</style>
